<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    :root{
        --bgc-dark:#181818;
        --bgc-light:pink;
    }
    .light{
        background: var(--bgc-light);
    }
    .dark{
        background: var(--bgc-dark);
    }
</style>
<body>
    <div>
        <select name="thems" id="changeTheme">
            <option value="Light">亮色主题</option>
            <option value="Dark">黑暗主题</option>
        </select>
    </div>
    <script>
        const changeTheme = document.querySelector("#changeTheme");
        
        // setDefaultTheme()
        changeTheme.addEventListener("change",(e)=>{
            console.log(e.target.value);
            console.log(111);
            if (e.target.value=="Dark") {
                document.documentElement.setAttribute("class","dark")
            }else{
                document.documentElement.setAttribute("class","light")
            }
        })
        // 设置默认主题色
        !(function setDefaultTheme(){
            document.documentElement.setAttribute("class","light")
        })();
        // document.documentElement.style.setProperty("--bgc-dark","green")
    </script>
</body>
</html>